<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询快递</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        #result{
            width:100%;
            min-height: 100px;
            border:solid 1px #222;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="col-xs-6 col-xs-offset-3">
            <h2 class="page-header">查询快递</h2>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="运单编号">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">查询</button>
                </span>
            </div>
            <hr>
            <ul id="result"></ul>
        </div>
    </div>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
    <script>
        //按钮绑定事件
        $('button').click(function(){
            //获取用户输入的运单编号
            let code = $('input').val();
            $.get('/query', {code: code}, function(data){
                if(data.code === 0){
                    //成功的情况
                    data.data.data.forEach(item => {
                        //创建 li 标签
                        let li = $('<li></li>');
                        //设置文本
                        li.html(`[${item.time}]  ${item.context}`);
                        //将 li 插入到 ul 中
                        $('ul').append(li);
                    })
                }else{
                    //失败的情况
                }
            },'json')
        })
    </script>
</body>

</html>